<template>
	<div class="main">
		<div class="input">
			<div class="div">
				用户状态:
				<select id="state">
					<option value="" disabled selected hidden>请选择</option>
					<option value="通过">通过</option>
					<option value="待审核">待审核</option>
				</select>
			</div>
			
			<div class="div">
				用户信息:<el-input v-model="text" style="width: 240px" />
			</div>
		</div>


		<div class="btn">
			<el-button type="primary" @click="sai">搜索</el-button>
			<el-button type="primary" @click="delsai">清空搜索条件</el-button>
		</div>

		<div>

			<el-table ref="table" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
				:cell-class-name="tableRowClassName" empty-text="暂无数据">
				<el-table-column prop="text" label="用户信息" width="220" />
				<el-table-column prop="state" label="状态" width="120">
					<template #default="scope">
						<label :class="scope.row.state ? 'label' : 'label2'">{{scope.row.state ? '通过' : '待审核'}}</label>
					</template>
				</el-table-column>
				<el-table-column prop="time" label="更新时间" width="220" />
				<el-table-column prop="addtime" label="添加时间" width="220" />
				<el-table-column label="操作" width="120">
					<template #default="scope">
						<el-button :type="scope.row.state ? 'danger' : 'primary'">
							{{scope.row.state ? '下线' : '通过'}}
						</el-button>
					</template>
				</el-table-column>
			</el-table>

		</div>
	</div>
</template>
<script>
	import mockjs from "@/mockjs/index.js"
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	// import * as XLSX from 'xlsx'

	export default {
		data() {
			return {
				text:'',
				tableData: '',
				list: '',
				list2: '',
			}
		},
		methods: {
			sai() {
				if (this.text != '') {
					let msg = this.text.split('')
					this.tableData = this.list.filter(item => {
						for (let m of msg) {
							return item.text.indexOf(m) != -1
						}
					})
					this.list = this.tableData
				}
				let i = document.getElementById('state').value;
				if (i != '') {
					this.tableData = this.list.filter(item => {
						if(i == '通过') return item.state == true;
						if(i == '待审核') return item.state == false;
					})
				}
			},
			delsai() {
				document.getElementById('state').selectedIndex = 0;
				this.text = ''
				this.list = this.list2
				this.tableData = this.list2
			},
			tableRowClassName({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				// 把每一行的索引放进row和index
				row.index = rowIndex;
				column.index = columnIndex;
			},
			getTime(time) {
				var date = new Date(time);
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let time2 = y + '-' + m + '-' + d
				return time2
			},
		},
		mounted() {
			this.tableData = mockjs.getManagerReq()
			this.list = this.tableData
			this.list2 = this.tableData
		}
	}
</script>

<style scoped>
	.main {
		display: flex;
		flex-wrap: wrap;
		background-color: white;
		flex-direction: column;

	}

	.input {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 15px;
	}

	.input .div select {
		border: 1px solid #ebeef5;
		width: 237px;
		height: 32px;

		color: gray;
		outline: none;
		text-indent: 5px;
		margin-left: 5px;
	}

	.input .div:first-child {
		margin-left: 15px;
	}

	.input .div {
		margin-left: 50px;
	}

	.input .div div {
		margin-left: 3px;
	}

	.btn {
		margin: 20px 20px;
		display: flex;
	}

	.header .el-button {
		margin: 0;
		border-radius: 0;
		border-bottom: 0;
	}

	.header .el-button:active {
		color: aqua;
	}

	label{
		text-align: center;
	}
	.label{
		color: #95b1e6;
		background-color: #ecf4ff;
		width: 55px;
		float: left;
	}
	.label2{
		color: #8fbd79;
		background-color: #f1f8ed;
		width: 55px;
		float: left;
	}
</style>